<template>
  <div>绘制canvas的椭圆旋转</div>
  <div>绘制canvas的圆形旋转</div>
</template>

<script lang="ts">
import {onMounted} from "vue/dist/vue";
import {CanvasDraw} from "../assets/source/canvasDraw";

export default {
  name: "customCanvasDraw",
  setup() {

    onMounted(() => {
      let yjd = 0
      let tyjd = 0
      let a = 200
      let b = 100
      let s = 0.1
      const paint = (ctx: CanvasRenderingContext2D, x1:number, y1:number, x2:number, y2:number) =>{
        ctx.clearRect(0,0,500,500)

        ctx.save()
        ctx.translate(250,250);
        ctx.beginPath()
        ctx.moveTo(0,5)
        ctx.lineTo(0,-5);
        ctx.stroke()
        ctx.beginPath();
        ctx.moveTo(5,0);
        ctx.lineTo(-5,0);
        ctx.stroke();
        ctx.beginPath()
        ctx.arc(0,0,50, 0 , 2*Math.PI)
        ctx.strokeStyle='blue'
        ctx.stroke()

        // ctx.setLineDash([10])
        //  圆形轨道
        ctx.beginPath()
        ctx.arc(0,0,200 , 0 ,2 *Math.PI)
        ctx.strokeStyle='#000'
        ctx.lineWidth = 3
        ctx.stroke()
        //  椭圆轨道
        ctx.strokeStyle = 'green'
        ctx.beginPath()
        ctx.moveTo(a, 0)
        for(let i = 0 ; i < 2*Math.PI; i+=s) {
          ctx.lineTo(Math.cos(i)*a, Math.sin(i)*b)
        }
        ctx.stroke()

        ctx.lineWidth = 1
        //椭圆轨道 旋转球
        ctx.beginPath()
        //绘制旋转球
        ctx.arc(x2, y2, 20, 0 , 2 * Math.PI)
        ctx.stroke()

        //圆形轨道 旋转球
        ctx.strokeStyle='#000'
        ctx.beginPath()
        ctx.arc(x1, y1, 20, 0 , 2 * Math.PI)
        ctx.stroke()

        ctx.restore()
      }
      const canvasEditor = new CanvasDraw(500,500, ).draw((ctx) => {
        const animate = () => {
          /** 圆形旋转的公式
           * 新的点位的坐标 x,y
           * x = Math.cos(θ * Math.PI / 180) * radius
           * y = Math.sin(θ * Math.PI / 180) * radius
           */
          yjd += 0.5
          const x1=Math.cos(yjd * Math.PI / 180) * a
          const y1=Math.sin(yjd * Math.PI / 180) * a

          /** 椭圆旋转的公式
           * 新的点位的坐标 x,y
           * x = Math.cos(θ * Math.PI / 180) * xRadius
           * y = Math.sin(θ * Math.PI / 180) * yRadius
           */
          tyjd += 0.3
          const x2=Math.cos(tyjd * Math.PI / 180) * a
          const y2=Math.sin(tyjd * Math.PI / 180) * b
          paint(ctx, x1, y1, x2, y2)
          requestAnimationFrame(animate)
        }
        animate()

      }).preview()
    })
  }
}
</script>

<style scoped>

</style>